<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="./css/styles.css">
		<link rel="stylesheet" href="./css/main.css" rel="stylesheet">
		<link rel="stylesheet" href="./css/open-iconic.css" rel="stylesheet">
		<title>Open-Iconic Picker</title>
	</head>

	<body>
		<div>
			<h2>Open-Iconic Picker</h2>
			<span>点击图标直接复制其 Unicode 值到剪贴板</span>
		</div>

		<div class="content">
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-body">
							<ul class="icon-lists"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script>
			icon_list = [
				'account-login', 'account-logout', 'action-redo', 'action-undo', 'align-center', 'align-left', 'align-right', 'aperture',
				'arrow-bottom', 'arrow-circle-bottom', 'arrow-circle-left', 'arrow-circle-right', 'arrow-circle-top', 'arrow-left',
				'arrow-right', 'arrow-thick-bottom', 'arrow-thick-left', 'arrow-thick-right', 'arrow-thick-top', 'arrow-top', 'audio-spectrum',
				'audio', 'badge', 'ban', 'bar-chart', 'basket', 'battery-empty', 'battery-full', 'beaker', 'bell', 'bluetooth', 'bold', 'bolt',
				'book', 'bookmark', 'box', 'briefcase', 'british-pound', 'browser', 'brush', 'bug', 'bullhorn', 'calculator', 'calendar',
				'camera-slr', 'caret-bottom', 'caret-left', 'caret-right', 'caret-top', 'cart', 'chat', 'check', 'chevron-bottom', 'chevron-left',
				'chevron-right', 'chevron-top', 'circle-check', 'circle-x', 'clipboard', 'clock', 'cloud-download', 'cloud-upload', 'cloud',
				'cloudy', 'code', 'cog', 'collapse-down', 'collapse-left', 'collapse-right', 'collapse-up', 'command', 'comment-square', 'compass',
				'contrast', 'copywriting', 'credit-card', 'crop', 'dashboard', 'data-transfer-download', 'data-transfer-upload', 'delete', 'dial',
				'document', 'dollar', 'double-quote-sans-left', 'double-quote-sans-right', 'double-quote-serif-left', 'double-quote-serif-right',
				'droplet', 'eject', 'elevator', 'ellipses', 'envelope-closed', 'envelope-open', 'euro', 'excerpt', 'expand-down', 'expand-left',
				'expand-right', 'expand-up', 'external-link', 'eye', 'eyedropper', 'file', 'fire', 'flag', 'flash', 'folder', 'fork', 'fullscreen-enter',
				'fullscreen-exit', 'globe', 'graph', 'grid-four-up', 'grid-three-up', 'grid-two-up', 'hard-drive', 'header', 'headphones', 'heart',
				'home', 'image', 'inbox', 'infinity', 'info', 'italic', 'justify-center', 'justify-left', 'justify-right', 'key', 'laptop', 'layers',
				'lightbulb', 'link-broken', 'link-intact', 'list-rich', 'list', 'location', 'lock-locked', 'lock-unlocked', 'loop-circular',
				'loop-square', 'loop', 'magnifying-glass', 'map-marker', 'map', 'media-pause', 'media-play', 'media-record', 'media-skip-backward',
				'media-skip-forward', 'media-step-backward', 'media-step-forward', 'media-stop', 'medical-cross', 'menu', 'microphone', 'minus',
				'monitor', 'moon', 'move', 'musical-note', 'paperclip', 'pencil', 'people', 'person', 'phone', 'pie-chart', 'pin', 'play-circle',
				'plus', 'power-standby', 'print', 'project', 'pulse', 'puzzle-piece', 'question-mark', 'rain', 'random', 'reload', 'resize-both',
				'resize-height', 'resize-width', 'rss-alt', 'rss', 'script', 'share-boxed', 'share', 'shield', 'signal', 'signpost', 'sort-ascending',
				'sort-descending', 'spreadsheet', 'star', 'sun', 'tablet', 'tag', 'tags', 'target', 'task', 'terminal', 'text', 'thumb-down',
				'thumb-up', 'timer', 'transfer', 'trash', 'underline', 'vertical-align-bottom', 'vertical-align-center', 'vertical-align-top',
				'video', 'volume-high', 'volume-low', 'volume-off', 'warning', 'wifi', 'wrench', 'x', 'yen', 'zoom-in', 'zoom-out'
			]

			window.onload = function () {
				const container = document.getElementById('container'),
					ul = document.getElementsByClassName('icon-lists')[0]
				let icon_span = '';

				icon_list.forEach(element => {
					icon_span = document.createElement('li')
					icon_span.innerHTML = 
						`<div class="list-item">\
							<div class="list-item-icon">\
								<div class="oi icon" glyph="${element}"></span>\
							</div>\
							<div class="list-item-label">\
								<span class="select-all">${element}</span>\
							</div>\
						</div>`
					icon_span.getElementsByClassName('icon')[0].onclick = icon_click_event
					ul.appendChild(icon_span)
				})

				function icon_click_event(event) {
					let content = getComputedStyle(event.target, 'before').getPropertyValue('content')

					content = content.replaceAll('"', '')
					content = content.charCodeAt(0).toString(16)
					content = `\\u${content}`
					console.log(content)
					copyToClip(content)
				}

				function copyToClip(content) {
					var aux = document.createElement('input')
					aux.setAttribute('value', content)
					document.body.appendChild(aux)
					aux.select()
					document.execCommand('copy')
					document.body.removeChild(aux)
				}
			}
		</script>
	</body>
</html>